<template>
    <div>
        <button @click="isShow=!isShow">显示/影藏</button>
        <transition name="v1" appear>
            <h1 v-show="isShow">你好啊!</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name: "TestVue",
    data() {
        return {
            isShow: true
        }
    }
}
</script>

<style scoped>
h1 {
    background-color: #a95812;
}

.v1-enter-active {
    animation: jiale 0.5s linear;
}

.v1-leave-active {
    animation: jiale 0.5s linear reverse;
}

/*设置动画效果*/
@keyframes jiale {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(0px);
    }
}

</style>